<template>
	<view class="container">
		<view>
			<view class="title">设备树展示</view>
			<view>
				<ly-tree 
					ref="tree" 
					:tree-data="treeData" 
					:props="tree_props"  
					node-key="key"  
					:showNodeIcon="true"
					highlightCurrent
					@node-expand="handleNodeExpand" 
					@node-click="handleNodeClick">
				</ly-tree>
			</view>
		</view>
		<nav-bar :value="1"></nav-bar>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	
	import navBar from '@/components/common/nav';
	import LyTree from '@/components/ly-tree/ly-tree';
	import treeData from '@/util/data/tree.json';
	
	export default {
		components: {
			navBar,
			LyTree 
		},
		data() {
			return {
				treeData:treeData,
				tree_props:{
					id: 'key',
					label: 'title',
					children: 'children',
					icon:'type'
				}
			}
		},
		onShow() {
			
		},
		methods: {
			handleNodeClick(obj) {
				console.log('handleNodeClick', JSON.stringify(obj));
			},
			handleNodeExpand(obj) {
				// console.log('handleNodeExpand', JSON.stringify(obj));
			}
		}
	}
</script>

<style lang="scss">
	@import "@/style/config.scss";
	.container {
		//background: linear-gradient(to top, #ffffff, #a2c4c9, #7ab6bf);
		/* #ifndef APP-NVUE */
		margin-top:1rem;
		/* #endif */
		.title{
			font-size: 0.8rem;
			font-weight: bold;
			background: #7ab6bf;
			color: #fff;
			padding: 10px;
		}
		::v-deep .ly-tree {
			padding: 0;
			.ly-tree-node__content {
				height: 1.5rem;
			}
			.ly-tree-node__icon{
				background-size: 100%;
			}
			
			.Home,.Province,.City,.Area {
			  background-image: url("/static/tuli/area.svg");
			}
			.Substation {
			  background-image: url("/static/tuli/substation.svg");
			}
			.SubstationLine {
			  background-image: url("/static/tuli/substationLine.svg");
			}
			.CableSection {
			  background-image: url("/static/tuli/cableSection.svg");
			}
			.Equipment {
			  background-image: url("/static/tuli/equipment.svg");
			}
			.Transformer {
			  background-image: url("/static/tuli/transformer.png");
			}
			.BranchBox {
			  background-image: url("/static/tuli/branchBox.png");
			}
			.RingBox {
			  background-image: url("/static/tuli/ringBox.png");
			}
			.Tower {
			  background-image: url("/static/tuli/tower.png");
			}
			.steeltower {
			  background-image: url("/static/tuli/steeltower.png");
			}
			.cementtower {
			  background-image: url("/static/tuli/cementtower.png");
			}
			.woodtower {
			  background-image: url("/static/tuli/woodtower.png");
			}
			.unknowtower {
			  background-image: url("/static/tuli/unknowtower.png");
			}
			.SwitchStation {
			  background-image: url("/static/tuli/switchStation.png");
			}
			.ElectricityRoom {
			  background-image: url("/static/tuli/electricityRoom.png");
			}
			.CompactSubstation {
			  background-image: url("/static/tuli/compactSubstation.png");
			}
			.Virtual {
			  background-image: url("/static/tuli/virtual.png");
			}
			.DlWay-fix, .DlWay {
			  background-image: url("/static/tuli/road.svg");
			}
			.CableWell {
			  background-image: url("/static/tuli/cableWell.png");
			}
			.RegCableWell {
			  background-image: url("/static/tuli/regcablewell.png");
			}
			.UnknowCableWell {
			  background-image: url("/static/tuli/unknowcablewell.png");
			}
			.visulCableWell {
			  background-image: url("/static/tuli/virtual.png");
			}
			.YhCableWell {
			  background-image: url("/static/tuli/yhjmap.png");
			}
			.CableConnector {
			  background-image: url("/static/tuli/cableConnector.svg");
			}
			.Channel {
			  background-image: url("/static/tuli/channel.svg");
			}
			.Other {
			  background-image: url("/static/tuli/Other.svg");
			}
			// .ChannelOther {
			//   background-image: url("/static/tuli/其他埋设图例.png");
			// }
			// .ChannelPaiguan {
			//   background-image: url("/static/tuli/排管图例.png");
			// }
			// .ChannelQioaojia {
			//   background-image: url("/static/tuli/桥架图例.png");
			// }
			// .ChannelGoudao {
			//   background-image: url("/static/tuli/沟道图例.png");
			// }
			// .ChannelZhimai {
			//   background-image: url("/static/tuli/直埋图例.png");
			// }
			// .ChannelVisual {
			//   background-image: url("/static/tuli/虚拟管沟图例.png");
			// }
			// .ChannelSuidao {
			//   background-image: url("/static/tuli/隧道图例.png");
			// }
			// .ChannelDingguan {
			//   background-image: url("/static/tuli/顶管图例.png");
			// }
			.TurnPoint {
			  background-image: url("/static/tuli/TurnPoint.svg");
			}
		}
	}
</style>
